<template>
	<view class="">
		<!-- 头部导航 -->
		<DetailNavbar :opacity="opacity" @jump="handleJump"></DetailNavbar>
		<view class="swiper-container" id="product">
			<!-- ProductDetails.sysOssList -->
			<uv-swiper :list="list" height="732rpx" :indicator="false" @change="swiperChange">
				<template v-slot:indicator>
					<view class="custom-indicator-container">
						<!-- 自定义指示器 -->
						<view class="custom-indicator">
							<view v-for="(item, index) in list" :key="index">
								<view class="indicator-dot" :class="{ 'active': index === currentIndex }"></view>
							</view>
						</view>
					</view>
				</template>
			</uv-swiper>
		</view>
		<view class="info-head">
			<view class="size-18 blod color-333">{{ProductDetails.storeName}}</view>
			<view class="size-16 color-e9 blod">双链叠戴 古典之美</view>
			<view class="metals color-de">
				<view class="price-normal">
					<span class="size-14 size-bold">￥</span>
					<span class="size-22 size-bold">{{ProductDetails.price}}</span>
				</view>
				<view class="price-strike">
					<span class="size-16">￥</span>
					<span class="size-16">{{ProductDetails.otPrice}}</span>
				</view>
			</view>
			<view class="guarantee-box">
				<view class="guarantee" v-for="(item,index) in guaranteeList">
					<view class="guarantee-img"><img :src="item.url" alt="" /></view>
					<view class="color-333 size-16">{{item.title}}</view>
				</view>
			</view>
		</view>
		<view class="segmentation"></view>
		<!-- 产品信息 -->
		<view class="product-box">
			<view class="size-18  weight-600 color-333">
				产品信息
			</view>
			<view class="product-list">
				<view class="product-item">
					名称: 和田玉坠
				</view>
				<view class="product-item">
					品牌: 静心石
				</view>
				<view class="product-item">
					规格: 内径约53-60MM
				</view>
				<view class="product-item">
					材质: 和田玉
				</view>
				<view class="product-item">
					重量: 以收到的实物为准
				</view>
				<view class="product-item">
					颜色: 白
				</view>
				<view class="product-item">
					证书: 附送鉴定证书
				</view>
				<view class="product-item">
					包装: 品牌包装
				</view>
			</view>
		</view>
		<view class="segmentation"></view>
		<!-- 购买数量 -->
		<view class="purchaseQuantity">
			<view class="" style="display: flex; gap: 20rpx;">
				<view class="size-18  weight-600 color-333">购买数量</view>
				<view class="size-16 color-666">库存:{{ProductDetails.stock}}</view>
			</view>
			<view class="">
				<uv-number-box v-model="Quantity" @change="valChange" :max="ProductDetails.stock" bgColor="#f6c775"
					class="custom-number-box"></uv-number-box>
			</view>
		</view>
		<view class="segmentation"></view>
		<!-- 商品评价 -->
		<view class="evaluate" id="evaluate">
			<view class="evaluate-head" @click="ToEvaluate">
				<view class="size-18  weight-600 color-333">商品评价(599)</view>
				<view class="evaluate-img">
					<image src="../../static/icon/icon-zjt.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="evaluate-item" v-for="item in 2" @click="ToEvaluate">
				<view class="evaluate-left">
					<view class="evaluate-user">
						<view class="user-img">
							<image src="../../static/test/test_1.png" mode="widthFix"></image>
						</view>
						<view class="size-14 color-666">昵称</view>
					</view>
					<view class="comment size-12 color-666">
						她家的茶各方面都不错，我已经帮大家试喝了。色泽通透茶汤干净，香味浓郁，陈香挺好的，口感也没话说。我都她家的茶各方面都不错，我已经帮大家试喝了。色泽通透茶汤干净，香味浓郁，陈香挺好的，口感也没话说。我都
					</view>
				</view>
				<view class="evaluate-right">

					<view class="evaluate-imgItem" v-for="item in 4">
						<image src="../../static/test/test_1.png" mode="widthFix"></image>
					</view>
				</view>
			</view>

		</view>
		<view class="segmentation"></view>
		<!-- 详细介绍 -->
		<view class="detailsItem" id="details">
			<view class="size-18  weight-600 color-333">详细介绍</view>
			<view class="briefintroduction" v-html="ProductDetails.storeInfo"></view>

		</view>



		<!-- 加入购物车 -->
		<view class=""> <vk-data-goods-sku-popup ref="skuPopup" v-model="skuKey" border-radius="20" :z-index="990"
				:localdata="goodsInfo" :mode="skuMode" @open="onOpenSkuPopup" @close="onCloseSkuPopup"
				@add-cart="addCart" @buy-now="buyNow" add-cart-background-color="#32B9B3" buy-now-background-color="#e2c87d"></vk-data-goods-sku-popup></view>
		<!-- 底部 -->
		<view class="">
			<view class="placeholder">
			</view>
			<view class="detailsFooter">
				<view class="Footer-letf">
					<view class="Footer-box">
						<view class="Footer-img"><img src="@/static/icon/icon_visitor.png" alt="" /></view>
						<view class="color-333 size-14 ">咨询</view>
					</view>
					<view class="Footer-box">
						<view @click.stop="toggleLike">
							<view class="icon-heart-frame">
								<img src="@/static/icon/icon_collect.png" alt="" class="icon-heart icon-heart-active"
									:style="{
									transform: `scale(${liked? '0': '1'})`
								}" />
								<img src="@/static/icon/icon_collect_active.png" class="icon-heart icon-heart-active"
									alt="" style="z-index: 2;" :style="{
									transform: `scale(${liked? '1': '0'})`
								}" />
							</view>
						</view>
						<view class="color-333 size-14 ">收藏</view>
					</view>
				</view>
				<view class="Footer-right">
					<view class="join" @click="openSkuPopup()">加入购物车</view>
					<view class="buy">立即购买</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		$get,
	} from '@/utils/request';
	import DetailNavbar from './DetailNavbar/DetailNavbar.vue';
	export default {
		components: {
			DetailNavbar
		},
		data() {
			return {
				widthRpx: 0,
				opacity: 0,
				Quantity: 0,
				currentIndex: 0,
				liked: false, //收藏状态
				list: [{
						url: 'https://crazy3.top/images/avatar/狂三.png',
					},
					{
						url: 'https://crazy3.top/images/avatar/狂三.png',
					},
					{
						url: 'https://crazy3.top/images/avatar/狂三.png',
					}
				],
				ProductDetails: [],
				guaranteeList: [{
						url: '/static/icon/飞机.png',
						title: "顺丰包邮"
					},
					{
						url: '/static/icon/荣誉.png',
						title: "正品保障"
					},
					{
						url: '/static/icon/联保.png',
						title: "全国联保"
					}
				],
				// 购物车相关数据
				skuKey: false,
				// SKU弹窗模式
				skuMode: 1,
				// 后端返回的商品信息
				goodsInfo: {}


			};
		},
		onPageScroll(e) {
			this.opacity = (e.scrollTop * this.widthRpx) / 715
		},

		onUnload() {
			// 设置标志位表示是通过返回操作离开详情页
			uni.setStorageSync('isReturningFromDetail', true);
		},
		onLoad(option) {
			$get(`/system/storeProduct/${option.item}`).then(res => {
				this.ProductDetails = res.data
			})
			let systemInfo = uni.getSystemInfoSync()
			this.widthRpx = 750 / systemInfo.windowWidth
		},
		methods: {
			swiperChange(e) {
				this.currentIndex = e.current;
			},
			toggleLike() {
				this.liked = !this.liked

			},
			valChange(e) {
				console.log('当前值为: ' + e.value)
			},
			ToEvaluate() {
				uni.navigateTo({
					url: "/pages/DetailPages/evaluatePage/evaluatePage"
				})
			},
			handleJump(e) {
				const {
					id,
					navHeight
				} = e; // 从子组件获取导航栏高度

				// 获取当前滚动位置
				uni.createSelectorQuery().in(this)
					.selectViewport().scrollOffset(scrollRes => {
						const currentScrollTop = scrollRes.scrollTop;
						uni.createSelectorQuery().in(this)
							.select(`#${id}`)
							.boundingClientRect(rect => {
								if (rect) {
									// 计算最终滚动位置
									const targetScrollTop = currentScrollTop + rect.top - navHeight;

									uni.pageScrollTo({
										scrollTop: targetScrollTop,
										duration: 300
									});
								}
							}).exec();
					}).exec();
			},
			//购物车相关的方法
			// 初始化
			init(options = {}) {},
			// 加入购物车
			openSkuPopup() {
				console.log(111);
				/**
				 * 获取商品信息
				 * 这里可以看到每次打开SKU都会去重新请求商品信息,为的是每次打开SKU组件可以实时看到剩余库存
				 */
				// 此处写接口请求，并将返回的数据进行处理成goodsInfo的数据格式，
				// goodsInfo是后端返回的数据
				this.goodsInfo = {
					"_id": "001",
					"name": "iphone11",
					"goods_thumb": "https://img14.360buyimg.com/n0/jfs/t1/59022/28/10293/141808/5d78088fEf6e7862d/68836f52ffaaad96.jpg",
					"sku_list": [{
							"_id": "001",
							"goods_id": "001",
							"goods_name": "iphone11",
							"image": "https://img14.360buyimg.com/n0/jfs/t1/79668/22/9987/159271/5d780915Ebf9bf3f4/6a1b2703a9ed8737.jpg",
							"price": 19800,
							"sku_name_arr": ["红色", "128G", "公开版"],
							"stock": 1000
						},
						{
							"_id": "002",
							"goods_id": "001",
							"goods_name": "iphone11",
							"image": "https://img14.360buyimg.com/n0/jfs/t1/52252/35/10516/124064/5d7808e0E46202391/7100f3733a1c1f00.jpg",
							"price": 9800,
							"sku_name_arr": ["白色", "256G", "公开版"],
							"stock": 100
						},
						{
							"_id": "003",
							"goods_id": "001",
							"goods_name": "iphone11",
							"image": "https://img14.360buyimg.com/n0/jfs/t1/79668/22/9987/159271/5d780915Ebf9bf3f4/6a1b2703a9ed8737.jpg",
							"price": 19800,
							"sku_name_arr": ["红色", "256G", "公开版"],
							"stock": 1
						}
					],
					"spec_list": [{
							"name": "颜色",
							"list": [{
									"name": "红色"
								},
								{
									"name": "黑色"
								},
								{
									"name": "白色"
								}
							]
						},
						{
							"name": "内存",
							"list": [{
									"name": "128G"
								},
								{
									"name": "256G"
								}
							],
						},
						{
							"name": "版本",
							"list": [{
									"name": "公开版"
								},
								{
									"name": "非公开版"
								}
							]
						}
					]
				};
				this.skuKey = true;
			},


		},

	};
</script>

<style lang="less" scoped>
	.placeholder {
		height: calc(60px + env(safe-area-inset-bottom) + 30rpx);
	}

	.swiper-container {
		position: relative;

		.uv-swiper__indicator {
			bottom: 20rpx;
		}

		.uv-swiper__indicator-item {
			width: auto !important;
			height: auto !important;
			margin: 0 !important;
			padding: 0 !important;
			background-color: transparent !important;
		}

		.swiper-item {
			position: relative;
			width: 100%;
			height: 100%;
		}

		.swiper-image {
			width: 100%;
			height: 100%;
		}

		.custom-indicator-container {
			position: relative;
		}

		.custom-indicator {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 8rpx;
			border-radius: 40rpx;
			position: absolute;
			bottom: 20rpx;
			left: 50%;
			transform: translateX(-50%);
			z-index: 10;

			.indicator-dot {
				width: 16rpx;
				height: 16rpx;
				background-color: #ccc;
				border-radius: 50%;
				margin: 0 8rpx;
				transition: background-color 0.3s ease;

				&.active {
					background-color: #30BDAF !important;
				}
			}
		}

	}




	.info-head {
		padding: 30rpx;
		display: flex;
		gap: 30rpx;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.metals {
			display: flex;
			gap: 20rpx;

			.price-strike {
				margin-top: 10rpx;
			}

			.price-strike span {
				text-decoration: line-through;
				color: #999;
			}
		}

		.guarantee-box {
			width: 100%;
			display: flex;
			justify-content: space-around;

			.guarantee {
				display: flex;
				align-items: center;
				gap: 10rpx;

				.guarantee-img {
					width: 30rpx;
					height: 30rpx;

					img {
						width: 100%;
						height: 100%;
					}
				}

			}
		}

	}

	.product-box {
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;

		.product-list {
			display: flex;
			flex-wrap: wrap;
			gap: 20rpx;
			padding-top: 20rpx;

			.product-item {
				width: 48%;
				padding: 0rpx 20rpx;
				box-sizing: border-box;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				font-size: 16px;
				color: #666;
			}
		}
	}

	.purchaseQuantity {
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.evaluate {
		padding: 30rpx;
		// display: flex;
		// justify-content: space-between;
		// align-items: center;

		.evaluate-head {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.evaluate-img {
				width: 20rpx;

				image {
					width: 100%;
				}
			}
		}

		.evaluate-item {
			width: 100%;
			margin-top: 20rpx;

			// display: flex;
			// justify-content: space-between;
			.evaluate-left {
				width: 100%;

				.evaluate-user {
					display: flex;
					gap: 20rpx;
					align-items: center;

					.user-img {
						width: 50rpx;

						image {
							width: 100%;
							border-radius: 50%;
						}
					}


				}

				.comment {
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					text-overflow: ellipsis;
					line-height: 1.5;
					max-height: calc(1.5em * 2);
				}
			}

			.evaluate-right {
				width: 100%;
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				gap: 8rpx;

				.evaluate-imgItem {
					margin-top: 20rpx;
					width: 24%;

					image {
						width: 100%;
					}
				}

			}

		}

	}

	.detailsItem {
		padding: 30rpx;

		.briefintroduction {
			padding: 30rpx;
			box-sizing: border-box;
			font-size: 16px;
			color: #666;
		}
	}


	.detailsFooter {
		width: 100%;
		padding: 0 30rpx;
		height: 80px;
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 10;
		background-color: #fff;
		box-shadow: 0 0 3px -1px gray;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.Footer-letf {
			display: flex;
			align-items: center;
			gap: 60rpx;

			.Footer-box {

				.Footer-img {
					width: 60rpx;
					height: 60rpx;

					img {
						width: 100%;
						height: 100%;
					}
				}

				.icon-heart-frame {
					position: relative;
					width: 50rpx;
					height: 50rpx;

					.icon-heart {
						transition: all .3s;
						width: 100%;
						height: 100%;
					}

					.icon-heart-active {
						position: absolute;
						top: 0;
						left: 0;
					}
				}


			}
		}

		.Footer-right {
			width: 65%;
			display: flex;
			gap: 20rpx;
			justify-content: space-between;

			.join {
				width: 50%;
				height: 100rpx;
				text-align: center;
				line-height: 100rpx;
				background-color: #32B9B3;
				border-radius: 10rpx;
				color: #fff;
			}

			.buy {
				width: 50%;
				height: 100rpx;
				text-align: center;
				line-height: 100rpx;
				background-color: #e2c87d;
				border-radius: 10rpx;
				color: #6e4e16;
			}
		}



	}
</style>